<template>
  <div class="charts-container">
    <div id="myChart1" class="chart"></div>
    <div id="myChart2" class="chart"></div>
    <div id="myChart3" class="chart"></div>
    <div id="myChart4" class="chart"></div>
  </div>
</template>

<script>
import axios  from 'axios';
import * as echarts from "echarts"

export default {
  name: 'application',
  data() {
    return {
    }
  },
  async mounted() {
    await this.initChart1();
    await this.initChart2();
    await this.initChart3();
    await this.initChart4();
  },
  methods:{
    initChart1() {
      var mychart = echarts.init(document.getElementById('myChart1'));
      var bookname = [];
      var booknum = [];
      return axios.get("http://localhost:8080/echarts/echarts/echart1")
        .then(function (res) {
          var response = res.data.data;
          for (var i = 0; i < response.length; i++) {
            bookname.push(response[i].book_name);
            booknum.push(response[i].total);
          }
          mychart.setOption({
            title: {
              text: '前5本热门图书借阅',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            xAxis: {
              type: 'category',
              data: bookname,
              axisLabel: {
                interval: 0,
                rotate: 20
              }
            },
            yAxis: {
              type: 'value',
              name: '(借阅数量)'
            },
            series: [
              {
                data: booknum,
                type: 'line',
                smooth: true
              }
            ]
          });
        })
        .catch(function (error) {
          alert('获取“图书借阅数量”数据失败，请稍后重试。');
        });
    },
    initChart2() {
      var mychart = echarts.init(document.getElementById('myChart2'));
      var activityname = [];
      var number = [];
      return axios.get("http://localhost:8080/echarts/echarts/echart2")
        .then(function (res) {
          var response = res.data.data;
          for (var i = 0; i < response.length; i++) {
            activityname.push(response[i].activity_name);
            number.push(response[i].num);
          }
          const randomRGB = () => {
            const r = Math.floor(Math.random() * 255);
            const g = Math.floor(Math.random() * 255);
            const b = Math.floor(Math.random() * 255);
            return `rgb(${r},${g},${b})`;
          };
          mychart.setOption({
            title: {
              text: '活动报名统计',
              left: 'center'
            },
            tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: activityname,
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                interval: 0,
                rotate: 20
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(报名人数)',
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: number,
                itemStyle: {
                  color: randomRGB
                }
              }
            ]
          });
        })
        .catch(function (error) {
          alert('获取“活动报名统计”数据失败，请稍后重试。');
        });
    },
    initChart3() {
      var mychart = echarts.init(document.getElementById('myChart3'));
      var dataname = [];
      return axios.get("http://localhost:8080/echarts/echarts/echart3")
        .then(function (res) {
          var response = res.data.data;
          for (var i = 0; i < response.length; i++) {
            var name = response[i].name;
            var num=response[i].num;
            dataname.push({
              value: num,
              name: name
            });
          }
          mychart.setOption({
            title: {
              text: '社区发帖统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                  borderRadius: 10
                },
                label: {
                  show: true,
                  formatter(param) {
                    return param.name + ' (' + param.percent + '%)';
                  }
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 13,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: true
                },
                data: dataname
              }
            ]
          });
        })
        .catch(function (error) {
          alert('获取“社区发帖统计”数据失败，请稍后重试。');
        });
    },
    initChart4() {
      var mychart = echarts.init(document.getElementById('myChart4'));
      var bookname = [];
      var storenum = [];
      return axios.get("http://localhost:8080/echarts/echarts/echart4")
        .then(function (res) {
          var response = res.data.data;
          for (var i = 0; i < response.length; i++) {
            bookname.push(response[i].name);
            storenum.push(response[i].num);
          }
          const randomRGB = () => {
            const r = Math.floor(Math.random() * 255);
            const g = Math.floor(Math.random() * 255);
            const b = Math.floor(Math.random() * 255);
            return `rgb(${r},${g},${b})`;
          };
          mychart.setOption({
            title: {
              text: '图书库存统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              min:0,
              max:1000,
              interval: 100,
            },
            yAxis: {
              type: 'category',
              data: bookname,
              fontSize: 10
            },
            series: [
              {
                type: 'bar',
                data: storenum,
                itemStyle: {
                  color: randomRGB,
                }
              }
            ]
          });
        })
        .catch(function (error) {
          alert('获取“图书库存统计”数据失败，请稍后重试。');
        });
    }
  }
}
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行2个图表 */
  gap: 20px; /* 图表间距 */
  padding: 20px;
}

.chart {
  width: 100%;
  height: 400px;
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  background-color: #fff; /* 背景色 */
}
</style>